<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
    <meta charset=utf-8/>
    <title>Poker.JS demo</title>
    <style>
        div, select, option {
            font: bold 15px 'Microsoft Yahei', Verdana;
        }

        div {
            margin: 10px 0;
        }

        #status {
            color: brown;
        }

        #code {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px 4px;
            background: #ffd;
            font: bold 14px consolas;
        }
    </style>
    <script src="../source/poker.js"></script>
</head>
<body>
<div>
    选择大小生成整套牌的Sprite图:
    <select id="selector">
        <option>40</option>
        <option>52</option>
        <option>60</option>
        <option>72</option>
        <option>80</option>
        <option>92</option>
        <option>100</option>
        <option selected="selected">120</option>
        <option>152</option>
        <option>200</option>
        <option>252</option>
        <option>300</option>
        <option>400</option>
        <option>500</option>
    </select>
</div>
<div>
    右键点击并选择'图片另存为...'可以保存全图。<span id="status">&nbsp;</span>
</div>

<div id="command">
    <span>代码: </span><span id='code'>点击牌面得到相应代码</span>
</div>

<div id="container">
    &nbsp;
</div>
</body>
<script src="../source/poker.js"></script>
<script>
    if (window.Poker) {
        var container = document.getElementById('container'), domCanvas = document.createElement('canvas'), canvas = domCanvas.getContext('2d');
        var commandArray = [[], [], [], [], [], [], [], [], [], [], [], [], []], param = {};
        container.appendChild(domCanvas);

        function showpoker(size) {
            var h = +(size || 200), w = h * 0.75, x = 0, y = 0, suits = ['hearts', 'diamonds', 'spades', 'clubs'], points = ['a', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'j', 'q', 'k'];
            param.h = h;
            param.w = w;
            domCanvas.height = 5 * h;
            domCanvas.width = 13 * w;

            for (var ks in suits) {
                for (var kp in points) {
                    drawPokerCard(x, y, h, suits[ks], points[kp]);
                    x += w;
                }
                x = 0, y += h;
            }
            drawPokerCard(x = 0, y, h, 'hearts', 'joker');
            drawPokerCard(x += w, y, h, 'spades', 'joker');
            drawPokerBack(x += w, y, h, '#b55', '#a22');
            drawPokerBack(x += w, y, h, '#F9CD9C', '#EB870D');
            drawPokerBack(x += w, y, h, '#A464B8', '#5E0C78');
            drawPokerBack(x += w, y, h, '#7A7BB8', '#2E319C');
            drawPokerBack(x += w, y, h, '#58AAAF', '#1F7A80');
            drawPokerBack(x += w, y, h, '#78A867', '#437034');
            drawPokerBack(x += w, y, h, '#B7B860', '#7E7F2A');
            drawPokerBack(x += w, y, h, '#A9566C', '#71273A');
            drawPokerBack(x += w, y, h, '#8BA23C', '#3C451B');
            drawPokerBack(x += w, y, h, '#5C72C2', '#2B4299');
            drawPokerBack(x += w, y, h, '#90928C', '#535550');

            document.getElementById('status').innerHTML = '全图尺寸: ' + domCanvas.width + ' x ' + domCanvas.height + ' 单个牌尺寸: ' + w + ' x ' + h;
        }

        function drawPokerCard(x, y, h, suit, point) {
            canvas.drawPokerCard(x, y, h, suit, point);
            commandArray[x / param.w][y / param.h] = 'canvas.drawPokerCard(' + x + ', ' + y + ', ' + h + ', \'' + suit + '\', \'' + point + '\');';
        };
        function drawPokerBack(x, y, h, c1, c2) {
            canvas.drawPokerBack(x, y, h, c1, c2);
            commandArray[x / param.w][y / param.h] = 'canvas.drawPokerBack(' + x + ', ' + y + ', ' + h + ', \'' + c1 + '\', \'' + c2 + '\');';
        };


        canvas.drawPokerCard(0, 0, 100, 'h', 'a');

        //showpoker(120);

        document.getElementById('selector').addEventListener('change', function () {
            showpoker(this.value);
        });
        domCanvas.addEventListener('click', function (e) {
            var x = ((e.pageX - e.target.offsetLeft) / param.w) | 0, y = ((e.pageY - e.target.offsetTop ) / param.h) | 0;
            document.getElementById('code').innerHTML = commandArray[x][y];
            console.dir(e)

        });

    } else {
        document.body.innerHTML = 'This browser does not support canvas.';
    }

</script>
</html>
